<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i> 榜单歌曲信息
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="delete"
          class="handle-del mr10"
          @click="delAll"
          >批量删除</el-button
        >
        <el-input
          v-model="select_word"
          placeholder="筛选关键词"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" @click="centerDialogVisible = true"
          >添加歌曲</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          align="center"
          width="100"
          prop="rank"
          label="本榜排名"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.rank">暂无排名</span>
            <span v-else>{{ scope.row.rank }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="歌手-歌曲"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="updateRank(scope.row)"
              >更新排名</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--添加歌曲-->
    <el-dialog
      title="添加歌曲"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form
        :model="registerForm"
        status-icon
        ref="registerForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item prop="singerName" label="歌手名字">
          <el-input
            v-model="registerForm.singerName"
            placeholder="歌手名字"
          ></el-input>
        </el-form-item>
        <el-form-item prop="songName" label="歌曲名字">
          <el-input
            v-model="registerForm.songName"
            placeholder="歌曲名字"
          ></el-input>
        </el-form-item>
        <el-form-item prop="rank" label="榜单排名">
          <el-input-number
            v-model="registerForm.rank"
            :min="1"
            label="本榜单排名"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getSongId">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mixin } from "../mixins";

export default {
  name: "list-bang-page",
  mixins: [mixin],
  data() {
    return {
      registerForm: {
        singerName: "",
        songName: "",
        rank: null
      },
      tableData: [],
      tempDate: [],
      multipleSelection: [],
      centerDialogVisible: false,
      editVisible: false,
      delVisible: false,
      select_word: "",
      idx: -1
    };
  },
  watch: {
    select_word: function() {
      if (this.select_word === "") {
        this.tableData = this.tempDate;
      } else {
        this.tableData = [];
        for (let item of this.tempDate) {
          if (item.name.includes(this.select_word)) {
            this.tableData.push(item);
          }
        }
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取歌单
    getData() {
      let _this = this;
      _this.tableData = [];
      _this.tempDate = [];
      _this.$axios
        .get(
          `${_this.$store.state.HOST}/listBangOfSingers?bangListId=${_this.$route.query.id}`
        )
        .then(res => {
          console.log(res.data);
          for (let item of res.data) {
            _this.getSong(item); // 根据歌曲ID获取歌曲信息
          }
          // 对tableData进行排序
          _this.tableData.sort((a, b) => {
            return a - b;
          });
        });
    },
    // 获取歌单里对应的音乐
    getSong(item) {
      let _this = this;
      const id = item.songId;
      // const rank = item.rank
      // const listBangId = item.id
      console.log(item.rank);

      _this.$axios
        .get(`${_this.$store.state.HOST}/listSongsOfSongs?id=${id}`)
        .then(function(res) {
          let song = res.data[0];
          song["rank"] = item.rank;
          song["listBangId"] = item.id;
          _this.tableData.push(song);
          _this.tempDate.push(song);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 获取要添加歌曲的ID
    getSongId() {
      let _this = this;
      var id =
        _this.registerForm.singerName + "-" + _this.registerForm.songName;
      _this.$axios
        .get(`${_this.$store.state.HOST}/listSongsOfSearch?name=${id}`)
        .then(res => {
          _this.addSong(res.data[0].id); // 歌曲ID
        });
    },
    // 添加歌曲
    addSong(id) {
      let _this = this;
      let params = new URLSearchParams();
      params.append("songId", id);
      params.append("bangListId", _this.$route.query.id);
      params.append("rank", _this.registerForm.rank);
      _this.$axios
        .post(`${_this.$store.state.HOST}/api/addListBang`, params)
        .then(res => {
          if (res.data.code === 1) {
            _this.getData();
            _this.$notify({
              title: "添加成功",
              type: "success"
            });
          } else {
            _this.$notify({
              title: "添加失败",
              type: "error"
            });
          }
        });
      _this.centerDialogVisible = false;
    },
    // 更新榜单
    updateRank(row) {
      let _this = this;
      this.$prompt("请输入本榜排名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9]+$/,
        inputErrorMessage: "请输入数字"
      })
        .then(({ value }) => {
          console.log("跟新排名");

          _this.$axios
            .get(
              `${_this.$store.state.HOST}/updateRank?listBangId=${row.listBangId}&rank=${value}`
            )
            .then(res => {
              if (res.data) {
                _this.getData();
                _this.$notify({
                  title: "更新成功",
                  type: "success"
                });
              } else {
                _this.$notify({
                  title: "更新失败",
                  type: "error"
                });
              }
            });
        })
        .catch(() => {});
    },
    // 确定删除
    deleteRow() {
      let _this = this;
      _this.$axios
        .get(
          `${_this.$store.state.HOST}/api/deleteListOfBang?songId=${_this.idx}&bangId=${_this.$route.query.id}`
          // 根据歌曲ID和榜单ID删除
        )
        .then(res => {
          if (res.data) {
            _this.getData();
            _this.$notify({
              title: "删除成功",
              type: "success"
            });
          } else {
            _this.$notify({
              title: "删除失败",
              type: "error"
            });
          }
        })
        .catch(failResponse => {});
      _this.delVisible = false;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
</style>
